<!DOCTYPE html>
<html>

<head>
    <title>自定义事件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js"></script>
</head>

<body>
    <div id="app">
        <currency-input label="Price" v-model="price"></currency-input>
        <currency-input label="Shipping" v-model="shipping"></currency-input>
        <currency-input label="Handling" v-model="handling"></currency-input>
        <currency-input label="Discount" v-model="discount"></currency-input>
        <p>Total: ${{ total }}</p>
    </div>
    <script type="text/x-template" id="demo-template">
        <div>
            <label v-if="label">{{ label }}</label>
            <input ref="input" v-bind:value="value" v-on:input="update($event.target.value)" v-on:focus="selectAll" v-on:blur="format">
        </div>
    </script>
    <script>
    Vue.component('currency-input', {
        template: '#demo-template',
        props: {
            value: {
                type: Number,
                default: 0
            },
            label: {
                type: String,
                default: ''
            }
        },
        mounted: function() {
            this.format()
        },
        methods: {
            update: function(v) {
                var result = currencyValidator.parse(v, this.value)
                if (result.warning) {
                    this.$refs.input.value = result.value
                }
                this.$emit('input', result.value)
            },
            format: function() {
            	this.$refs.input.value = currencyValidator.format(this.value)
            },
            selectAll: function() {
                this.$refs.input.select()
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            price: 0,
            shipping: 0,
            handling: 0,
            discount: 0
        },
        computed: {
            total: function() {
                return ((
                    this.price * 100 +
                    this.shipping * 100 +
                    this.handling * 100 -
                    this.discount * 100
                ) / 100).toFixed(2)
            }
        }
    })
    </script>
</body>

</html>
